<template>
  <div class="content">
    <div class="information">
      <div class="header" v-text="'基本信息'"></div>
      <ul class="safe-auth" >
        <li>
          <span>账号:</span>
          <span>{{infos.member}}</span>
        </li>
        <li>
          <span>姓名:</span>
          <span>{{infos.username}}</span>
        </li>
        <li>
          <span>节点:</span>
          <span>{{teamviews}}</span>
          <!-- <a
              @click="bindHandle('nickname')"
              class="color-dangers"
              href="javascript:"
              v-text="$t('change')||'修改'"
            >
            </a> -->
        </li>
        <li>
          <span>登录密码:</span>
          <input type="password" v-model="password" readonly>
          <a
              @click="bindHandle('loginPassword')"
              class="color-dangers"
              href="javascript:"
              v-text="$t('change')||'修改'"
            >
            </a>
        </li>
      </ul>
    </div>
    <div class="settings">
      <div class="header" v-text="'安全设置'"></div>
      <ul class="safe-auth">
        <li>
          <span>邮箱绑定</span>
          <a href="javascript:" @click="bindHandle('email')" v-text="infos.email ==''?'去绑定':'去更换'"></a>
          <p>
            <i :class="infos.email == ''?'el-icon-warning color-danger':'el-icon-success color-success'"></i>
            <span v-if="infos.email ==''">未绑定</span>
            <span v-else>已绑定</span>
          </p>
          <p>用于交易、提现以及其他安全操作,非常重要</p>
        </li>
        <li>
          <span>交易密码</span>
          <a href="javascript:" @click="bindHandle('financialPassword')" v-text="infos.tradpasswordstate=='1'?'去设置':'去修改'"></a>
          <p>
            <i :class="infos.tradpasswordstate !='1'?'el-icon-success color-success':'el-icon-warning color-danger'"></i>
            <span v-if="infos.tradpasswordstate =='1'">未设置</span>
            <span v-else>已设置</span>
          </p>
          <p>用于交易、提现以及其他安全操作,非常重要</p>
        </li>
        <li>
          <span>绑定手机</span>
          <a href="javascript:" @click="bindHandle('tel')" v-text="infos.tel == ''?'去绑定':'去修改'"></a>
          <p>
            <i :class="[infos.tel !=''?'el-icon-success color-success':'el-icon-warning color-danger']"></i>
            <span v-if="infos.tel ==''">未绑定</span>
            <span v-else>已绑定 <i>{{infos.tel}}</i></span>
          </p>
          <p v-if="infos.tel ==''">您还未绑定手机号</p>
          <p v-else>您已绑定手机号</p>
        </li>
        <li>
          <span>谷歌验证</span>
          <a href="javascript:"  @click="bindHandle('googleAccount')" v-text="infos.googlekeystate=='1'?'去绑定':'去修改'"></a>
          <!-- <a href="javascript:" v-else >已绑定</a> -->
          <p>
            <i :class="infos.googlekeystate !='1'?'el-icon-success color-success':'el-icon-warning color-danger'"></i>
            <span v-if="infos.googlekeystate =='1'">未绑定</span>
            <span v-else>已绑定</span>
          </p>
          <p>用于交易、提现以及其他安全操作,非常重要</p>
        </li>
      </ul>
    </div>
    <!-- 日志 -->
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="登录历史" name="first">
        <div class="firsts">
          <span>时间</span>
          <span>登录方式</span>
          <span>IP</span>
          <span>登录地址</span>
        </div>
        <div class="rolls">
          <ul class="history" v-for="item in history">
          <li>{{item.wdate}}</li>
          <li>{{item.type}}</li>
          <li>{{item.ip}}</li>
          <li>{{item.address}}</li>
        </ul>
        </div>
      </el-tab-pane>
      <el-tab-pane label="安全设置历史" name="second">
        <div class="firsts">
          <span>时间</span>
          <span>内容</span>
        </div>
        <div class="rolls">
          <ul class="history" v-for="item in safety">
            <li>{{item.wdate}}</li>
            <li>{{item.updatelog}}</li>
          </ul>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- 修改登录密码 -->
    <bind-password
      passwordType="loginpassword"
      :show='dialogId=="loginPassword"?true:false'
      :title='$t("changePwd")||"修改登录密码"'
      :bindEmail='infos.email=="0"?false:true'
      :bindCellphone='infos.tel?true:false'
      apiKey='updateloginpwd'
      @closeModal='onClose'
    >
    </bind-password>
    <!-- 修改资金密码 修改交易密码-->
    <bind-password
      passwordType="tradepassword"
      :show='dialogId=="financialPassword"?true:false'
      :title='fundPassTitle'
      apiKey='updatepaypassword'
      :bindEmail='infos.email=="0"?false:true'
      :bindCellphone='infos.tel?true:false'
      :passwordLabel='$t("newFundPwd")||"资金密码"'
      :oldPasswordLabel='$t("loginPwd")'
      @fundPasswordUpdated='fundPasswordUpdated'
      @closeModal='onClose'
    >
    </bind-password>
    <!-- 绑定邮箱 -->
    <bind-email
      :show='dialogId=="email"?true:false'
      @closeModal='onClose'
      @emailBind="emailBind"
    >
    </bind-email>
    <!-- 绑定手机 -->
    <bind-tel
      :show='dialogId=="tel"?true:false'
      @closeModal='onClose'
      @telBind="telBind"
    >
    </bind-tel>
    <!-- 修改昵称 -->
    <!-- :cardNum='this.infos.bankcard' -->
      <!-- :depositBank='this.infos.khyh' -->
    <!-- <bind-bank
      :show='dialogId=="nickname"?true:false'
      :ownerName='this.infos.username'
      @bankCardBind='bankCardBind'
      @closeModal='onClose'
    >
    </bind-bank> -->
    <!-- 谷歌验证 -->
    <google-auth
      @onGoogleBind='onGoogleBind'
      :show='dialogId=="googleAccount"?true:false'
      @closeModal='onClose'
    >
    </google-auth>
  </div>
</template>
<script>
import bindPassword from "../../components/dialogContent/bindPassword";
import bindEmail from "../../components/dialogContent/bindEmail";
import bindTel from "../../components/dialogContent/bindTel";
// import bindBank from "../../components/dialogContent/bindBankCard";
import googleAuth from "../../components/dialogContent/googleAuth";
// import bindBank from "../../components/dialogContent/nickname";
import myStorage from '@/assets/js/myStorage';
export default {
  components: {
    bindPassword,
    bindEmail,
    // bindBank,
    googleAuth,
    bindTel,
  },
  data() {
    return {
      activeName: 'first',
      teamviems: '',
      dialogId: "",
      password: 12345678,
      // infos: {
      //   emailstate: "0"
      // },
      infos:[],
      lists: '',
      authLogs: null,
      loginLogs: null,
      history: [],
      safety: [],
    };
  },
  mounted() {
    // this.getState();
    // this.getSafeLogs();
    // this.getLoginLogs();
    this.getuserinfo();
    this.getuserloginlog();
    this.getusersettinglog();
    
  },
  computed: {
    fundPassTitle() {
      return this.infos.tradstate == "0"
        ? `${this.$t("bindFundPwd")}`
        : `${this.$t("change")}${this.$t("fundPwd")}`;
    }
  },
  methods: {
    bindHandle(k, index) {
      let idState = this.infos.idcardstate;
      if (k == "bankAccount") {
        if (idState == "0") {
          this.$confirm(this.$t("label137"), this.$t("label140"), {
            confirmButtonText: this.$t("label138"),
            cancelButtonText: this.$t("label139"),
            type: "warning"
          }).then(() => {
            this.navigateTo("Identify");
          });
          return;
        } else if (idState == "1") {
          this.$alert(this.$t("label141"), this.$t("label140"), {
            confirmButtonText: this.$t("label138")
          });
          return;
        }
      }
      this.dialogId = k;
    },
    onClose() {
      this.dialogId = null;
      this.getuserinfo();
    },
    getuserinfo() {
      this.request(this.api.getuserinfo).then(res => {
        if (res && res.code != "0") {
          this.getDataFaild(res.msg || "获取数据失败");
          return false;
        }
        this.infos = res.data[0];
        if(this.infos.teamview == "0") {
          this.teamviews = '散户'
        }
        if(this.infos.teamview == "1") {
          this.teamviews = '节点'
        }
        if(this.infos.teamview == "2") {
          this.teamviews = '超级节点'
        }
        if(this.infos.teamview == "3") {
          this.teamviews = '城市节点'
        }
        if(this.infos.teamview == "4") {
          this.teamviews = '星际节点'
        }
        // 存区号
        myStorage.set("areacode", this.infos.areacode);
      });
    },
    // 登录历史
    getuserloginlog() {
      this.request(this.api.getuserloginlog,{pagesize:'30',pagecode:'1'}).then(res => {
        if (res && res.code != "0") {
          this.getDataFaild(res.msg || "获取数据失败");
          return false;
        }
        this.history = res.data;
      });
    },
    getusersettinglog() {
      this.request(this.api.getusersettinglog).then(res => {
        if (res && res.code != "0") {
          this.getDataFaild(res.msg || "获取数据失败");
          return false;
        }
        this.safety = res.data;
      });
    },
  }
};
</script>

<style lang="scss" scoped>
.title {
  margin-bottom: 25px;
}
.mt-20 {
  margin-top: 20px;
}
.information {
  .header {
    @include textVcenter;
    padding: 0 15px;
    color: #C1C1C1;
    border-bottom: 1px solid #303030;
    
  }
  .safe-auth {
      padding: 0 15px;
      display:flex;
      display:-webkit-flex;
      justify-content: space-between;
      margin-bottom: 10px;
      li {
        display: inline-block;
        margin: 15px 0;
        span:nth-child(1) {
          color: #717171;
        }
        span:nth-child(2) {
          padding: 0 15px;
          color: #C1C1C1;
        }
        input {
          width: 50px;
          background-color: #0A0A0A;
          color: #C1C1C1;
          padding: 0 15px;
        }
      }
    }
}
.settings {
  .header {
    @include textVcenter;
    padding: 0 15px;
    color: #C1C1C1;
    border-bottom: 1px solid #303030;
  }
  .safe-auth {
      padding:  15px;
      li {
        display: inline-block;
        width: 320px;
        height: 80px;
        padding: 3%;
        background-color: #313131;
        border-radius: 3px;
        margin: 0 2% 2%;
        >span {
          color: #DBDBDB;
          font-size: 15px;
        }
        >a {
          display: inline-block;
          font-size: 12px;
          color: #F6F7FC;
          float: right;
          padding: 6px 12px;
          background-color: #6A83F7;
          border-radius: 3px;
        }
        >p:nth-child(3) {
          margin: 25px 0 15px;
          span {
            color: #DBDBDB;
            i {
              color: #D6B079;
            }
          }
        }
        >p:nth-child(4) {
          color: #6E6E6E;
        }
      }
    }
}
.table-wrap {
  border: $default-border;
  .header {
    @include textVcenter;
    background: #fcfcfc;
    padding: 0 15px;
    border-bottom: $default-border;
  }
  .safe-auth {
    padding: 0 15px;
    li {
      @include textVcenter;
      padding: 0 0.1%;
      border-top: $default-border;
      &:first-child {
        border-top: none;
      }
      span {
        height: inherit;
        float: left;
        display: block;
        width: 33.3%;
      }
    }
  }
}
.color-dangers {
  color: #5C72D8;
}
.bd-bottom-none {
  border-bottom: none;
}
a,
i {
  &.danger {
    color: $color-danger;
  }
  &.success {
    color: $color-success;
  }
}
.el-table th, .el-table tr {
  display:flex!important;
  display:-webkit-flex!important;
  justify-content: space-between!important;
}
.firsts {
  display:flex;
  display:-webkit-flex;
  justify-content: space-between;
  span {
    color: #595959;
  }
}
.history {
  display:flex;
  display:-webkit-flex;
  justify-content: space-between;
  margin: 15px 0;
  li {
    display: inline-block;
    color: #BEBEBE;
  }
  li:nth-child(2) {
    width: 120px;
  }
  li:nth-child(3) {
    width: 140px;
  }
}
.el-tabs__item.is-active {
  color: #DEB77C!important;
}
.rolls {
  overflow-y: auto;
  margin-top: 15px;
  height: 220px;
}
::-webkit-scrollbar {
    width: 0;
    height: 0;
}
</style>

